<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>缓存全局变量</title>
</head>

<body>
    <!--  
    缓存全局变量的情况 
    1.将使用中无法避免的全局变量缓存到局部：在程序使用中某些变量是无法避免的存在于全局（浏览器内置对象document），可以通过将程序中大量重复使用的全局变量缓存至局部变量来提高性能
    -->
    <!-- 通过有效的缓存全局变量提高代码性能  -->
    <input type="button" value="btn" id="id1">
    <input type="button" value="btn" id="id2">
    <input type="button" value="btn" id="id3">
    <input type="button" value="btn" id="id4">
    <p>1111</p>
    <input type="button" value="btn" id="id5">
    <input type="button" value="btn" id="id6">
    <p>222</p>
    <input type="button" value="btn" id="id7">
    <input type="button" value="btn" id="id8">
    <p>333</p>
    <input type="button" value="btn" id="id9">
    <input type="button" value="btn" id="id10">

    <script>
        function getBtn() {
            let btn1 = document.getElementById('btn1')
            let btn3 = document.getElementById('btn3')
            let btn5 = document.getElementById('btn5')
            let btn7 = document.getElementById('btn7')
            let btn9 = document.getElementById('btn9')

        }

        function getBtn2() {
            let obj = document
            let btn1 = obj.getElementById('btn1')
            let btn3 = obj.getElementById('btn3')
            let btn5 = obj.getElementById('btn5')
            let btn7 = obj.getElementById('btn7')
            let btn9 = obj.getElementById('btn9')
        }
        // 详见：jsbench.me缓存全局变量.jpg

        // 总结：根据jsbench.me 提供，方法二执行效率高于方法一
    </script>

</body>

</html>